<template>
    <view class="cart-temp" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <mescroll-uni v-if="isLoadOk" :height="height" ref="mescrollRef" @init="mescrollInit" :down="downOption"
                @down="refresh" :up="upOption" @up="getData" @emptyclick="emptyClick">
                <view class="header-action-bar header-action-bar-title bg-trans" @click="changeEditState">
                    <text class="car-title">购物车</text>
                    <text>{{ isEdit ? "完成" : "编辑" }}</text>
                </view>
                <view class="cart-list">
                    <cart-supplier-item v-for="(item, index) in datas" :key="item.ProductId" :isEdit="isEdit"
                        :selectData="selectData" :productInfo="item" @upNum="upNum" @changeCheck="changeCheck"
                        @changeSupplierCheck="changeSupplierCheck" @checkboxChange="checkboxChange" @delTip="delTip">
                    </cart-supplier-item>
                </view>
            </mescroll-uni>
            <!-- <view class="bottom-bar-mark" v-if="datas.length>0"></view> -->
        </view>

        <cart-bottom-bar ref="cartBottomBar" :isHome="isHome" :isEdit="isEdit" :selectData="selectData"
            :isShowSelect="isShowSelect" :productInfo="datas" @selectAll="selectAll" @delCart="delCart"
            @isSelectAllBack="isSelectAllBack"></cart-bottom-bar>

        <uni-popup ref="delTip" type="dialog">
            <uni-popup-dialog type="text" title="温馨提示" content="确定删除该商品?" :before-close="true" @close="close"
                @confirm="doDel"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
// import {
// 	mapMutations,
// 	mapState,
// 	mapGetters
// } from 'vuex'
import cartSupplierItem from "@/components/supplier/cart/cart-supplier-item.vue"
import cartBottomBar from "@/components/supplier/cart/cart-bottom-bar.vue"
import { getSupplierCarList, deleteSupplierCar, updateCart } from "@/utils/cartUtil.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { eventBus } from "@/utils/eventBus.js"
export default {
    components: {
        cartSupplierItem,
        cartBottomBar,
    },
    props: {
        isHome: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            config: {
                title: "购物车",
                back: false,
                centerSlot: true,
                barPlaceholder: true,
                rightSlot: false,
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                        type: "编辑",
                    },
                ],
            },
            isEdit: false,
            isShowSelect: true,
            downOption: {
                use: true,
            },
            upOption: {
                empty: {
                    btnText: "立即购买",
                },
            },
            datas: [],
            isLoadOk: false,
            height: "",
            isEmpty: false,
            selectData: {
                proIds: [],
                ids: [],
            },
            isSelectAll: true,
            delPro: null,
        }
    },
    computed: {},

    created() {
        if (!this.isHome) {
            this.config.back = true
            this.$nextTick(() => {
                this.getListHeight()
            })
        }
    },
    mounted() {
        eventBus.$on("SET_CART", (msg) => {
            if (msg) {
                this.datas = this.formatSupplierCart(msg)
            }

            //购物车数据变化 更新UI
            this.upView()
            this.upBottom()
            if (this.isSelectAll) {
                this.selectAll(true)
            }
        })
    },
    methods: {
        //获取列表高度
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                e = this.isHome ? e - 54 - uni.upx2px(120) : e - uni.upx2px(120)
                this.height = e + "px"
                this.isLoadOk = true
                //#ifndef MP
                setTimeout((e) => {
                    this.refresh()
                }, 500)
                //#endif
            })
        },
        //获取数据
        getData() {
            getSupplierCarList().then((res) => {
                // this.datas = this.formatSupplierCart(res)
                if (res.length > 0) {
                    this.mescroll.endBySize(res.length, 1)
                } else {
                    this.isEmpty = true
                    this.mescroll.endBySize(0, 0)
                }
                this.upBottom()
                this.selectAll(true)
            })
        },
        //更新UI
        upView() {
            if (this.mescroll) {
                this.mescroll.endBySize(this.datas.length, 1)
            }
        },
        //更新底栏
        upBottom() {
            this.$refs.cartBottomBar.getTotal(this.datas)
        },
        //刷新
        refresh() {
            if (this.mescroll) {
                this.mescroll.resetUpScroll()
            }
        },
        //更新底栏数据
        upNum(e) {
            this.upBottom()
        },
        //去采购
        emptyClick() {
            this.easyGoProduct()
        },
        //删除
        delCart(isClearAll) {
            if (isClearAll) {
                let ids = []
                this.datas.forEach((supplier) => {
                    supplier.ProductItems.forEach((pro) => {
                        pro.SubItems.forEach((sub) => {
                            ids.push(String(sub.ID))
                        })
                    })
                })
                let param = {
                    ids: ids.join(","),
                }
                this.doDelCart(param)
            } else if (this.selectData.ids.length > 0) {
                let param = {
                    ids: this.selectData.ids.join(","),
                }
                this.doDelCart(param)
            }
        },
        //删除接口
        doDelCart(param) {
            uni.showLoading({
                title: "提交中",
            })
            deleteSupplierCar(param).then((res) => {
                if (res) {
                    uni.hideLoading()
                    // this.refresh()
                    this.isEdit = false
                    this.selectData.ids = []
                }
            })
        },
        //全选
        selectAll(e) {
            // this.isSelectAll = e
            let ids = []
            if (e) {
                this.datas.forEach((supplier) => {
                    supplier.ProductItems.forEach((pro) => {
                        pro.SubItems.forEach((sub) => {
                            if (sub.SaleStatus == 1 || this.isEdit) {
                                ids.push(String(sub.ID))
                            }
                        })
                    })
                })
            }
            this.setTreeSelect(ids)
        },
        //商品子项选择回调
        checkboxChange(e, id) {
            let values = e.detail.value
            if (values.length > 0) {
                this.selectData.ids.push(values[0])
            } else {
                this.selectData.ids.forEach((e, index) => {
                    if (e == id) {
                        this.selectData.ids.splice(index, 1)
                    }
                })
            }
            this.setTreeSelect(this.selectData.ids)
        },
        //数据处理
        setTreeSelect(ids) {
            //去重
            const set = new Set(ids)
            ids = [...set]
            this.selectData = {
                ids: ids,
            }
            this.$forceUpdate()
        },
        //单个商品全选or取消全选
        changeCheck(obj) {
            let isSelect = obj.isSelect
            let proId = obj.proId
            let supplierId = obj.supplierId
            let subIds = obj.subIds
            if (isSelect) {
                //全选
                this.datas.forEach((supp) => {
                    if (supp.SupplierId == supplierId) {
                        supp.ProductItems.forEach((e) => {
                            if (e.ProductId == proId) {
                                e.SubItems.forEach((sub) => {
                                    if (sub.SaleStatus == 1 || this.isEdit) {
                                        this.selectData.ids.push(String(sub.ID))
                                    }
                                })
                            }
                        })
                    }
                })
            } else {
                //取消全选
                for (var i = this.selectData.ids.length - 1; i >= 0; i--) {
                    let e = this.selectData.ids[i]
                    subIds.forEach((sub) => {
                        if (e == sub) {
                            this.selectData.ids.splice(i, 1)
                        }
                    })
                }
            }
            this.setTreeSelect(this.selectData.ids)
        },
        //单个供应商全选or取消全选
        changeSupplierCheck(obj) {
            let isSelect = obj.isSelect
            let proId = obj.proId
            let supplierId = obj.supplierId
            let subIds = obj.subIds
            if (isSelect) {
                //全选
                this.datas.forEach((supp) => {
                    if (supp.SupplierId == supplierId) {
                        supp.ProductItems.forEach((e) => {
                            e.SubItems.forEach((sub) => {
                                if (sub.SaleStatus == 1 || this.isEdit) {
                                    this.selectData.ids.push(String(sub.ID))
                                }
                            })
                        })
                    }
                })
            } else {
                //取消全选
                for (var i = this.selectData.ids.length - 1; i >= 0; i--) {
                    let e = this.selectData.ids[i]
                    subIds.forEach((sub) => {
                        if (e == sub) {
                            this.selectData.ids.splice(i, 1)
                        }
                    })
                }
            }
            this.setTreeSelect(this.selectData.ids)
        },
        isSelectAllBack(e) {
            this.isSelectAll = e
        },
        close() {
            this.$refs.delTip.close()
        },
        doDel() {
            let obj = {
                ProductId: this.delPro.ProductId,
                Amount: 0,
                UnitId: this.delPro.UnitId,
                UnitName: this.delPro.DefaultUnit,
                skuId: this.delPro.SkuId,
                ratio: this.delPro.Ratio,
            }
            let param = []
            param.push(obj)
            updateCart(param).then((res) => { })
            this.close()
        },
        delTip(e) {
            this.delPro = e
            this.$refs.delTip.open()
        },
        changeEditState() {
            if (this.isEdit) {
                // 删除不是上架状态的商品
                let ids = this.selectData.ids
                this.datas.forEach((supplier) => {
                    supplier.ProductItems.forEach((pro) => {
                        pro.SubItems.forEach((sub) => {
                            if (sub.SaleStatus != 1) {
                                ids.map((val, i) => {
                                    if (val == sub.ID) {
                                        ids.splice(i, 1)
                                    }
                                })
                            }
                        })
                    })
                })
                this.setTreeSelect(ids)
            }
            this.isEdit = !this.isEdit
        },
    },
}
</script>

<style lang="scss" scoped>
.container {}

.cart-temp {}

.cart-list {
    padding: 0 $app-page-padding $app-page-padding $app-page-padding;
}

.car-title {
    font-weight: bold;
    font-size: 32rpx;
    color: $color-gray-1;
}

.bg-trans {
    background: transparent;
}
</style>
